<template>
  <view class="personal-warp">
    <!-- #ifdef H5 -->
    <van-nav-bar @click-left="onClickLeft" left-arrow title="个人资料"></van-nav-bar>
    <!-- #endif -->
    <!-- 信息编辑 -->
    <view class="content">
      <view class="title">基本资料</view>
      <view class="item">
        <view class="itemname">用户姓名</view>
        <view class="itemname-detail">
          <input
            class="user-input"
            type="text"
            v-model="data.userName"
            maxlength="30"
            placeholder="请输入真实姓名"
            placeholder-style="color:#545454;font-size:14px" />
        </view>
      </view>
      <view class="line"></view>
      <view class="item">
        <view class="itemname">归属城市</view>
        <view class="itemname-detail" style="background: transparent; z-index: 100">
          <pick-city :defaultRegion="data.cityCode" @getRegion="handleGetRegion1">
            <text style="color: #e2e2e2; font-size: 30rpx" v-if="!data.isChoice1">
              点击选择省市
            </text>
            <text class="user-input" v-if="data.isChoice1">{{ data.regionName1 }}</text>
          </pick-city>
        </view>
      </view>
      <view class="line"></view>
      <view class="title">收件地址</view>
      <view class="item">
        <view class="itemname">城市/区域</view>
        <view class="itemname-detail" style="background: transparent; z-index: 100">
          <pick-regions :defaultRegion="data.defaultRegionCode" @getRegion="handleGetRegion">
            <text style="color: #545454; font-size: 28rpx" v-if="!data.isChoice">
              点击选择省市区
            </text>
            <text class="user-input text-overflow" v-if="data.isChoice">{{ data.regionName }}</text>
          </pick-regions>
        </view>
      </view>
      <view class="line"></view>
      <view class="item">
        <view class="itemname">详细地址</view>
        <view class="itemname-detail">
          <input
            class="user-input"
            type="text"
            v-model="data.receivingRegion"
            placeholder="请输入详细地址"
            maxlength="100"
            placeholder-style="color:#545454;font-size:14px" />
        </view>
      </view>
      <view class="line"></view>
      <view class="item">
        <view class="itemname">收件电话</view>
        <view class="itemname-detail">
          <input
            class="user-input"
            type="text"
            v-model="data.receivingPhone"
            placeholder="请输入收件电话"
            maxlength="11"
            placeholder-style="color:#545454;font-size:14px" />
        </view>
      </view>
      <view class="line"></view>
    </view>
    <view class="bottom-wrap" :style="styleBntH">
      <button class="bnt-wrap bnt" @tap="submit">保存</button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive, inject } from 'vue';
import pickCity from '@/components/pickCity/pickCity.vue';
import pickRegions from '@/components/pickRegions/pickRegions.vue';
import { getSystemInfo, setToastInstance, systemInfo } from '@mixins/info';
import { queryPersonal, updatePersonal } from '@/service/apis/mine';
import { getItem } from '@/utils/util';
// #ifdef MP-WEIXIN
import { useToast } from '@/components/wxToast';
setToastInstance(useToast());
// #endif

// 分享
onShareAppMessage(() => {
  return {
    title: '',
    path: '/pages/stationMap/stationMap',
  };
});
const $toast: any = inject('$Toast');
let styleBntH = ref(`height: calc(124rpx + ${getSystemInfo().safeBottom}px)`);

const data = reactive({
  isChoice: false,
  region: [],
  defaultRegion: [],
  defaultRegionCode: '',
  isChoice1: false,
  cityCode: '',
  userName: '',
  receivingRegion: '',
  receivingPhone: '',
  // email:"",
  regionName: '',
  regionName1: '',
  cityName: '',
  receivingAddress: '',
  receivingIds: '',
  // info: {} as any,
});
const handleGetRegion1 = (region: any, code: any) => {
  // if (provinceName) {
  //   data.regionName1 = `${provinceName} ${region}`;
  // } else {
  data.regionName1 = `${region}`;
  // }
  data.cityCode = code;
  data.cityName = region;
  data.isChoice1 = true;
};
const handleGetRegion = (region: any, code: any) => {
  data.region = region;
  if (data.region instanceof Array || Array.isArray(data.region)) {
    data.regionName = region.map((item: { name: any }) => item.name).join('');
    data.receivingAddress = region.map((item: { name: any }) => item.name).join('');
    console.log('regionName==========', data.regionName);

    data.defaultRegionCode = region[region.length - 1].code;
    data.receivingIds = `${region[0].code},${region[1].code},${region[2].code}`;
  } else {
    data.regionName = region;
    data.defaultRegionCode = code;
  }
  data.isChoice = true;
};
queryPersonal({}, { account: { accountId: getItem('userid') } })
  .then((res: any) => {
    if (res) {
      data.userName = res?.userName;
      data.receivingPhone = res?.receivingPhone;
      data.receivingRegion = res?.receivingRegion;
      if (res?.receivingAddress) {
        data.regionName = res?.receivingAddress;
        data.receivingAddress = res?.receivingAddress;
        data.receivingIds = res?.receivingIds;

        data.isChoice = true;
      }
      if (res?.cityName) {
        data.regionName1 = res?.cityName || '';
        handleGetRegion1(res.cityName, res.cityCode);
      }
    }
  })
  .catch(() => {});
const submit = () => {
  console.log(data);
  //   if (!data.userName) {
  //     $toast('请输入用户姓名');
  //     return;
  //   }
  updatePersonal(data, { account: { accountId: getItem('userid') } }).then((res: any) => {
    $toast('修改成功');
    uni.switchTab({
      url: '/pages/mine/mine',
    });
  });
};

// #ifdef H5
const onClickLeft = () => {
  uni.navigateBack();
};
setTimeout(() => {
  const navBarEle = document.querySelector('.van-nav-bar') as HTMLElement;
  navBarEle.style.paddingTop = `${systemInfo.statusBarHeight}px`;
});
// #endif
</script>

<style lang="scss" scoped>
.personal-warp {
  // #ifdef H5
  height: 100vh;
  display: flex;
  flex-direction: column;
  // #endif
  .content {
    padding: 0 16px;
    // #ifdef H5
    box-sizing: border-box;
    flex: 1;
    overflow-y: scroll;
    // #endif
    .title {
      font-size: 14px;
      line-height: 22px;
      color: #858585;
      margin: 12px 0 8px 0;
    }
    .item {
      background-color: #ffffff;
      display: flex;
      align-items: center;
      margin: 0 auto;
      height: 56px;
      line-height: 56px;
      align-items: center;
      position: relative;
      .itemname {
        font-size: 16px;
        // line-height: 24px;
        color: #242424;
      }
      .itemname-detail {
        margin-left: 15px;
        width: calc(100% - 93px);
        color: #545454;
      }
    }
  }

  .user-input {
    width: 100%;
    height: 15vw;
    font-size: 32rpx;
    color: #000000;
  }

  .line {
    border-bottom: 1px solid #f2f2f2;
    height: 1px;
    position: relative;
  }
  .bottom-wrap {
    display: flex;
    position: fixed;
    width: 100%;
    bottom: 0;
    background: #fff;
    border-top: 1px solid #f2f2f2;
    box-sizing: border-box;
    // #ifdef H5
    position: relative;
    // #endif
    .bnt {
      height: 44px;
      width: 343px;
      margin-top: 9px;
      border-radius: 50px;
    }
  }
}
</style>
